<template>
	<view class="page">
		<view class="top">
			<view class="background"></view>
		</view>
		<view class="user-card">
			<view class="card">
				<view class="top">
					<view class="userImage">
						<open-data type="userAvatarUrl"></open-data>
					</view>
				</view>
				<view class="bottom">
					<view class="left" v-if="userInfo.username">
						<view class="user-text">
							{{userInfo.username}}
						</view>
						<!-- <view class="user-phone"> 171****4133 </view> -->
					</view>
					<view class="left" v-else>
						<view class="user-text" style="color: #4996ff;" @click="popupShow = true">
							请登录
						</view>
					</view>
					<view class="right flex-center" v-if="userInfo.username">
						<u-icon class="icon" name="arrow-right"></u-icon>
					</view>
				</view>


			</view>
		</view>
		<view class="list-card">
			<!-- <view class="card">
				<view class="item item-bottom-solid" @click="showVip">
					<view class="left flex-center">
						<image src="@/static/myIcon/11.png" mode="aspectFit"></image>
					</view>
					<view class="center">
						<text>开通会员畅享无限对话</text>
					</view>

					<view class="right flex-center">
						<u-icon class="icon" name="arrow-right"></u-icon>
					</view>
				</view>
			</view> -->
			<view class="card">
				<view class="item item-bottom-solid" @click="getImageBtn">
					<view class="left flex-center">
						<!-- <image src="@/static/myIcon/user-item_walt.png" mode="aspectFit"></image> -->
						<u-icon name="weixin-fill" color="#4CAF50" size="50"></u-icon>
					</view>
					<view class="center">
						<text>加入群聊咨询</text>
					</view>
					<view class="right flex-center">
						<u-icon class="icon" name="arrow-right"></u-icon>
					</view>
				</view>
				<u-modal v-model="show" title="请扫描添加此微信">

					<view class="slot-content">
						<image width="100%" :src="imgImage" @click="imgPreview()"></image>
					</view>
				</u-modal>
			</view>
			<view class="card">
				<view class="item item-bottom-solid" @click="getImageBtn2">
					<view class="left flex-center">
						<!-- <image src="@/static/myIcon/user-item_walt.png" mode="aspectFit"></image> -->
						<u-icon name="thumb-up-fill" color="#F44336" size="50"></u-icon>
					</view>
					<view class="center">
						<text>小额捐赠</text>
					</view>
					<view class="right flex-center">
						<u-icon class="icon" name="arrow-right"></u-icon>
					</view>
				</view>
				<u-modal v-model="show2" title="捐赠主要用于购买接口使用额度">
			
					<view class="slot-content">
						<image width="100%" :src="imgImage2" @click="imgPreview2()"></image>
					</view>
				</u-modal>
			</view>
			<view class="card" v-if="false">
				<view class="item item-bottom-solid">
					<view class="left flex-center">
						<image src="@/static/myIcon/user-item_lock.png" mode="aspectFit"></image>
					</view>
					<view class="center">
						<text>看广告获取对话次数</text>
					</view>
					<view class="right flex-center">
						<u-icon class="icon" name="arrow-right"></u-icon>
					</view>
				</view>
			</view>
			<view class="card" v-if="false">
				<view class="item">
					<view class="left flex-center">
						<image src="@/static/myIcon/user-item_add.png" mode="aspectFit"></image>
					</view>
					<view class="center">
						<text>关注公众号</text>
					</view>
					<view class="right flex-center">
						<u-icon class="icon" name="arrow-right"></u-icon>
					</view>
				</view>
			</view>

		</view>
		<u-popup v-model="popupShow" mode="bottom" border-radius="14">
			<view class="wechat-login">
				<view class="wechat-title">
					<image class="wx" src="@/static/myIcon/wechat.png" mode="aspectFit"></image>
					<text class="title">微信账号授权登录</text>
				</view>
				<u-button type="success" @click="wxLogin">确认</u-button>
			</view>
		</u-popup>
		<view class="quit flex-center" v-if="userInfo.username">
			<view class="btn flex-center" @click="logOut">
				退出登录
			</view>
		</view>

	</view>
</template>
<script>
	export default {
		data() {
			return {
				// userAvatarUrl:'@/static/myIcon/logo.png',
				popupShow: false, //微信授权弹窗
				show: false,
				show2:false,
				imgList: [],
				userInfo: uni.getStorageSync('userInfo'),
				imgImage:'',
				imgImage2:'',
				website:'https://chatgpt.online.2wex.com',//域名



			};
		},
		onLoad(option) {
			this.getImage()
			this.getImage2()
			if(option.zan){
				if(parseInt(option.zan)==1){
					this.show2 = true;
				}
				if(parseInt(option.zan)==2){
					this.show = true;
				}
				
			}
		},
		onShow() {
			
			if(uni.getStorageSync('chapingad')){
				// 在页面中定义插屏广告
				let interstitialAd = null
				console.log('ad:',uni.getStorageSync('chapingad'));
				// 在页面onLoad回调事件中创建插屏广告实例
				if (wx.createInterstitialAd) {
				  interstitialAd = wx.createInterstitialAd({
				    adUnitId: uni.getStorageSync('chapingad')
				  })
				  interstitialAd.onLoad(() => {})
				  interstitialAd.onError((err) => {
					  console.log(err)
				  })
				  interstitialAd.onClose(() => {})
				}
				
				// 在适合的场景显示插屏广告
				if (interstitialAd) {
				  interstitialAd.show().catch((err) => {
				    console.error(err)
				  })
				}
			}
			
			
		},
		onShareAppMessage(res) {
			return {
				title:"快来一起体验全球最火的ChatGPT智能AI吧！",
				path:"/pages/index/index"
			};
		},
		methods: {
			// 获取广告
			getads(type){
				let that = this
				uni.request({
					url: this.website+"/ga/index",
					method: "get",
					data:{type:type},
					success:function(res){
						if(res.statusCode==200){
							that.ads[type] = res.data.data;
						}
					}
					})
			},
		
			getImageBtn(){
				
				this.show = true;
				// this.getImage()
			},
			getImageBtn2(){
				
				this.show2 = true;
				// this.getImage()
			},
			getImage() {
				uni.request({
					url: this.website+'/wxapp/getkefu',
					method: 'GET',
					success: (res) => {
						this.imgImage = res.data;
						
						
					}
				})
			},
			getImage2() {
				uni.request({
					url: this.website+'/wxapp/getzan',
					method: 'GET',
					success: (res) => {
						this.imgImage2 = res.data;
						
					}
				})
			},
			logOut() {
				uni.showLoading({
					title: "退出中..."
				});
				uni.clearStorageSync('userInfo');
				this.userInfo = {};
				uni.hideLoading();

			},

			// vip提示弹窗
			showVip() {
				uni.showToast({
					title: "您正在体验VIP会员功能",
					icon: 'none',
				})
			},
			imgPreview() {
				
				uni.previewImage({
					current: 0,
					loop: true,
					urls: [this.imgImage]
				})
			},
			imgPreview2() {
				
				uni.previewImage({
					current: 0,
					loop: true,
					urls: [this.imgImage2]
				})
			},
			// 微信登录方法
			wxLogin() {
				let that = this;
				uni.showLoading({
					title: "登陆中..."
				})
				this.popupShow = false;
				uni.login({
					provider: 'weixin',
					success: (loginRes) => {
						//if (loginRes.code) {
							// 获取code
							console.log('loginRes', loginRes)
							// 获取用户信息
							uni.getUserInfo({
								provider: 'weixin',
								success: function(infoRes) {
									console.log('userinfo', infoRes);
									uni.request({
										url: that.website+'/wxapp/login',
										method: 'POST',
										data: {
											rawData: infoRes.rawData,
											code: loginRes.code,
											signature: infoRes.signature,
											encryptedData: infoRes.encryptedData,
											iv: infoRes.iv
										},
										success: (res) => {
											uni.hideLoading();

											//将信息缓存起来
											uni.setStorageSync('userInfo', res.data
												.data);
											that.userInfo = res.data.data;
											console.log(that.userInfo);
										}
									})
								}
							});

						//}
					}
				});
			},


		},
	};
</script>
<style lang="scss" scoped>
	.top {
		height: 250rpx;
		position: relative;

		.background {
			background-color: #5199ff;
			border-bottom-left-radius: 22px;
			border-bottom-right-radius: 22px;
			position: absolute;
			height: 180rpx;
			width: 100%;
		}
	}

	.icon {
		color: #96a1ae;
		font-size: 40rpx;
	}

	.user-card {
		height: 170rpx;
		padding: 0 15px;

		.card {
			position: relative;
			bottom: 62px;
			height: 250rpx;
			background-color: white;
			border-radius: 5px;

			.top {
				height: 30%;
				position: relative;

				.userImage {
					position: absolute;
					bottom: 24%;
					left: 10%;
					width: 150rpx;
					height: 150rpx;
					overflow: hidden;
					border-radius: 50%;
					border: 2px solid white;
				}
			}

			.bottom {
				display: flex;
				height: 70%;

				.left {
					width: 80%;
					height: 100%;
					position: relative;

					.user-text {
						width: 100%;
						font-size: 1.6em;
						padding-left: 80rpx;
						height: 50%;
					}

					.login-btn {
						color: #4996ff;
					}

					.user-phone {
						color: #96a1ae;
						padding-left: 80rpx;
						height: 50%;
						width: 100%;
						font-size: 0.9em;
					}
				}

				.right {
					width: 20%;
					height: 50%;
				}
			}
		}
	}

	.list-card {
		padding: 0 15px;

		.card {
			border-radius: 5px;
			position: relative;
			background-color: white;
			border-radius: 5px;
			padding: 5px 30px;

			.item {
				display: flex;
				height: 120rpx;

				.left {
					width: 15%;

					image {
						width: 70rpx;
						height: 70rpx;
					}
				}

				.center {
					width: 65%;
					display: flex;
					justify-content: start;
					align-items: center;
					font-size: 1.1em;
				}

				.right {
					width: 20%;
					justify-content: flex-end;
				}
			}
		}
	}

	.item-bottom-solid {
		border-bottom: 1px solid #d4d6da;
	}

	.quit {
		height: 100rpx;
		margin-top: 50px;

		.btn {
			background-color: #4f99ff;
			border-radius: 30px;
			width: 80%;
			color: white;
			font-size: 1.2em;
			height: 100%;
		}
	}

	.flex-center {
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>

<style>
	.wechat-login {
		padding: 50upx 100upx;
		display: flex;
		flex-direction: column;
	}

	.wechat-title {
		display: flex;
		align-items: center;
		padding-bottom: 100upx;

	}

	.wx {
		width: 80upx;
		height: 80upx;
		margin-right: 50upx;
	}

	.title {}
		
	.slot-content{
		padding: 40upx 20upx;
		display: flex;
		justify-content: center;
		align-items: center;
		
	}
</style>
